<template>

  <div class="product-list">
    <div v-for="(item, index) in productList" :key="index" class="product-item" @click.stop="jumpDetail(item)">
      <img class="brug-img" :src="item.goodsCover" />
      <div class="identification-box">
        <img class="otc_icon" src="@/static/easydrug/homePage/otc_icon.png" />
        <img class="jia_icon" src="@/static/easydrug/homePage/jia_icon.png" />
        <img class="su_icon" src="@/static/easydrug/homePage/su_icon.png" />

      </div>
      <div class="info">
        <div class="name">{{ item.goodsName }}</div>
        <div class="tablet-box">
          <div class="tablet">{{ item.specifications }}</div>
          <div class="soldCount">已售{{ item.salesVolume }}件</div>
        </div>
        <div class="price-box">
          <div class="price"><span class="price-unit">￥</span>{{ item.goodsPrices }}</div>
          <div class="retailPrice">建议零售价:￥{{ item.retailPrice }}</div>
        </div>
        <div class="companyName">{{ item.manufacturer }}</div>
        <div class="effectiveDate">效期优于:{{ item.validTo }}</div>
        <div class="btns" @click.stop="()=>{}">
          <el-input-number class="input-number" :min="1" v-model="item.num" @change="handleChange"></el-input-number>
          <el-button class="btn"  @click.stop="do_add_cart(item)">加入购物车</el-button>
        </div>
      </div>
    </div>
    <product_add_cart_success_modal ref="product_add_cart_success_modal" />
  </div>

</template>
<script>
import product_add_cart_success_modal from "@/components/product/product_add_cart_success_modal.vue";


export default {
  name: "productList",
  components: {
    product_add_cart_success_modal
  },
  props: ["productList"],
  data() {
    return {
    
    };
  },
  computed: {

  },
  watch: {},

  created() {
    this.initData()
  },

  methods: {
    initData() {
    },
    handleChange(value) {
      console.log(value);
    },
    jumpDetail(item){
      this.$router.push({
        path:'/product-detail',
        query:{
          id:item.goodsId
        }
      })
    },
    //购车添加商品
    do_add_cart(item) {
      if (!this.mix_get_login_status()) {
        return;
      }

      // if (item.num > item.inventory) {
      //   alertErr("当前商品库存不足！");
      //   return;
      // }



      this.$httpApi('/api/v1/purchaser/addGoods/toCart',{
        goodsId: item.goodsId,
        goodsNums: item.num,
      }, 'post').then(res=>{
        this.$refs.product_add_cart_success_modal.init({
            num: item.num,
            ...item,
          });
      })
    },
  },
};
</script>
<style scoped lang="less">
.product-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .product-item {
    margin-top: 24px;
    margin-right: 15px;
    display: flex;
    width: 228px;
    flex-direction: column;
    background: #fff;
    position: relative;
    cursor: pointer;

    .brug-img {
      width: 228px;
      height: 228px;
    }

    .identification-box {
      position: absolute;
      top: 10px;
      right: 10px;

      .otc_icon {
        width: 26px;
        height: 14px;
        vertical-align: middle;
        margin-right: 4px;
      }

      .jia_icon {
        width: 16px;
        height: 16px;
        vertical-align: middle;
        margin-right: 4px;
      }

      .su_icon {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }

    }

    .info {
      padding: 12px 12px 12px 12px;

      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
      }

      .tablet-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        align-items: center;

        .tablet {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #EF1F1F;
          background: #FFF1F0;
          border-radius: 3px 3px 3px 3px;
          padding: 2px 8px;
        }

        .soldCount {
          font-family: Arial, Arial;
          font-weight: 400;
          font-size: 13px;
          color: #ABABAB;
          line-height: 22px;
          text-align: left;
        }
      }

      .price-box {
        margin-top: 8px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price-unit {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #EF1F1F;
        }

        .price {
          font-family: DIN Alternate, DIN Alternate;
          font-weight: bold;
          font-size: 22px;
          color: #EF1F1F;
        }

        .retailPrice {
          font-family: Arial, Arial;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
        }
      }

      .companyName {
        margin-top: 8px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
      }

      .effectiveDate {
        margin-top: 8px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
      }

      .btns {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .input-number {
          width: 104px !important;
          height: 30px !important;
          line-height: 28px !important;

          /deep/ .el-input__inner {
            height: 30px !important;
            line-height: 30px !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
          }

          /deep/ .el-input-number__decrease {
            width: 30px !important;
          }

          /deep/ .el-input-number__increase {
            width: 30px !important;
          }
        }

        .btn {
          height: 30px !important;
          padding: 3px 10px !important;
          background: #EF1F1F;
          border-radius: 4px 4px 4px 4px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
        }
      }
    }


    &:nth-child(5n) {
      margin-right: 0px !important;
    }
  }
}
</style>
